<template>
  <div>
    <el-card class="box-card">
      <el-row :gutter="8"
              type="flex"
              align="middle">
        <el-col :span="1.5">
          分类名字
        </el-col>
        <el-col :span="3">
          <el-input size="mini"
                    v-model='getParams.name'
                    placeholder="请输入分类名字"></el-input>
        </el-col>
        <el-col :span="1.5">
          <el-button size="mini"
                     type="primary"
                     icon="el-icon-search"
                     @click="getTableList()">搜索</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button icon='el-icon-refresh'
                     size="mini">重置</el-button>
        </el-col>
      </el-row>
      <div class="btnList">
        <el-row :gutter="8"
                type="flex"
                align="middle"
                class="btn_nav">
          <el-col :span="1.5">
            <el-button size="mini"
                       type="primary"
                       icon="el-icon-plus"
                       plain
                       @click="addXqq">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button size="mini"
                       type="success"
                       icon="el-icon-edit"
                       plain
                       @click="updatadata"
                       :disabled='checkItem.length!=1'>修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button size="mini"
                       type="danger"
                       icon="el-icon-delete"
                       plain
                       :disabled='checkItem.length==0'
                       @click="delMore">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button size="mini"
                       type="warning"
                       icon="el-icon-download"
                       @click="exportdata"
                       plain>导出</el-button>
          </el-col>
        </el-row>

        <el-row :gutter="8"
                type="flex"
                align="middle"
                class="btn_nav">

          <el-col :span="1.5">
            <el-button size="mini"
                       icon="el-icon-search"
                       circle></el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button @click="refreshTable"
                       size="mini"
                       icon="el-icon-refresh"
                       circle></el-button>
          </el-col>
        </el-row>
      </div>

      <!--  -->
      <el-table :data="tableData"
                v-loading="loading"
                style="width: 100%"
                :header-cell-style="{background:'#f8f8f9'}"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         width="120">
        </el-table-column>
        <el-table-column prop="id"
                         label="相亲全类型"
                         width="120">
        </el-table-column>
        <el-table-column prop="createTime"
                         label="添加时间"
                         width="180">
        </el-table-column>
        <el-table-column prop="name"
                         label="分类名字">
        </el-table-column>
        <el-table-column prop="gz"
                         label="加圈规则"
                         :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="data">
            <el-button icon="el-icon-edit"
                       type="text"
                       @click="updateHandler(data.row.id)">修改</el-button>
            <el-button icon="el-icon-delete"
                       type="text"
                       @click="deleteHandler(data.row.id)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
      <div class="page"
           v-show="total!=0">
        <el-pagination background
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="getParams.pageNum"
                       :page-sizes="[3, 5, 7, 9]"
                       :page-size="getParams.pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </el-card>

    <div>
      <el-dialog :title="tip?'添加相亲圈类型':'修改相亲圈类型'"
                 @closed="closed"
                 :visible.sync="dialogVisible"
                 width="60%">
        <el-form :model="formData"
                 :rules="rules"
                 ref="ruleForm"
                 label-width="80px">
          <el-form-item label="分类名称"
                        prop="name">
            <el-input v-model="formData.name"
                      placeholder="请输入分类名称"></el-input>
          </el-form-item>

          <el-form-item label="加圈规则"
                        prop="gz">
            <!-- <el-input v-model="formData.gz"></el-input> -->
            <quill-editor :gz="formData.gz"
                          @editorchange='getEidtorText' />

          </el-form-item>
          <el-form-item label="类型"
                        prop="ty">
            <el-select placeholder="请选择"
                       v-model="formData.ty">
              <el-option label="学霸"
                         :value="1">
              </el-option>
              <el-option label="公职"
                         :value="2">
              </el-option>
              <el-option label="离异"
                         :value="3">
              </el-option>
              <el-option label="颜值"
                         :value="4">
              </el-option>
              <el-option label="白领"
                         :value="5">
              </el-option>

            </el-select>
          </el-form-item>

        </el-form>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="addXqqType">确 定</el-button>
        </span>
      </el-dialog>
    </div>

  </div>

</template>

<script>
import quillEditor from '../../../components/Quill'
// import { quillEditor } from 'vue-quill-editor'
export default {
  components: { quillEditor },
  data() {
    return {
      formData: { name: '', gz: '', ty: '', createTimeL: '', id: null, remark: null, sz: null, updateTime: null },
      getParams: {
        pageNum: 1,
        pageSize: 3,
        name: ''
      },
      tableData: [],
      total: 0,
      tip: true,
      // 选中的
      checkItem: [],
      loading: true,
      dialogVisible: false,
      rules: {
        name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
        gz: [{ required: true, message: '请输入信息', trigger: 'blur' }],
        ty: [{ required: true, message: '请输入信息', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.loading = true
    this.getTableList()
  },
  methods: {
    updatadata() {
      this.tip = false
      this.updateHandler(this.checkItem[0].id)
    },
    delMore() {
      let ids = this.checkItem.map((el) => el.id)
      this.deleteHandler(ids)
    },
    deleteHandler(id) {
      this.$confirm(`是否确认删除相亲圈类型编号为${id.toString()}的数据项?`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let data = await this.$axios.delete(`com/xqqType/${id.toString()}`)
          console.log(data)
          if (data.data.code != 200) this.$message.error(data.data.msg)
          this.$message({
            type: 'success',
            message: data.data.msg
          })
          this.getTableList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },

    //
    async updateHandler(id) {
      this.tip = false
      let { data } = await this.$axios.get(`com/xqqType/${id}`)
      this.formData = data.data
      this.dialogVisible = true
    },
    // close
    closed() {
      this.formData = { name: '', gz: '', ty: '', createTimeL: '', id: null, remark: null, sz: null, updateTime: null }
      if (this.editor) {
        this.editor.children[0].innerHTML = ''
      }
    },
    // 富文本
    getEidtorText({ html, _this }) {
      if (!this.editor) this.editor = _this
      this.editor.html = html
    },
    async addXqqType() {
      if (this.editor) {
        this.formData.gz = this.editor.html
      }

      this.$refs.ruleForm.validate(async (valid) => {
        let data = null
        if (!valid) return false
        if (!this.formData.id) {
          data = await this.$axios.post('com/xqqType', this.formData)
        } else {
          data = await this.$axios.put('com/xqqType', this.formData)
        }

        if (data.data.code != 200) return this.$message.error(data.data.msg)
        this.$message({
          message: data.data.msg,
          type: 'success'
        })
        this.dialogVisible = false
        this.refreshTable()
      })
    },

    addXqq() {
      this.tip = true
      this.dialogVisible = true
      this.formData = { name: '', gz: '', ty: '', createTimeL: '', id: null, remark: null, sz: null, updateTime: null }
    },

    // 刷新
    refreshTable() {
      this.loading = true
      this.getTableList()
    },
    async getTableList() {
      let { data } = await this.$axios.get('com/xqqType/list?', { params: this.getParams })
      this.tableData = data.rows
      this.total = data.total
      this.loading = false
    },
    handleSizeChange(val) {
      this.getParams.pageSize = val
      this.getTableList()
    },
    handleCurrentChange(val) {
      this.getParams.pageNum = val
      this.getTableList()
    },
    handleSelectionChange(val) {
      this.checkItem = val
    },
    async exportdata() {
      this.$confirm('是否确认导出所有相亲圈类型数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // let data = await this.$axios.get('com/xqqType/export', { params: this.getParams })
          // console.log(data)
          this.getExport()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    async getExport() {
      let { data } = await this.$axios.get('com/xqqType/export', { params: this.getParams })

      if (data.code != 200) {
        this.$message.error('失败')
      } else {
        window.location.href = 'https://jumeng.xzjumeng.com/prod-api/common/download?fileName=' + encodeURI(data.msg) + '&delete=' + true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.el-card__body {
  padding: 10px;
  padding-top: 20px;
  .btnList {
    margin-bottom: 8px;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
  }
  .page {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>